<template>
  <div class="bSearch">
    <van-nav-bar
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <img
      src="https://p2.music.126.net/klOSGBRQhevtM6c9RXrM1A==/18808245906527670.jpg"
      alt=""
    />
    <p>Made for Merm ...</p>
    <span class="yi">艺人：橘子海OrangeOcean/the fin.发行：2021.12.25</span>
    <p class="play">
      <i class="fa fa-play-circle" style="float: left"></i>
      <strong style="float: left">全部播放</strong
      ><i class="fa fa-cloud-download" style="float: right"></i>
    </p>
    <ul class="two">
      <li v-for="item in list" :key="item.id">
        <h4>{{ item.title }}</h4>
        <em>{{ item.name }}</em>
        <i @click="dist(item.id)">...</i>
        <div id="tan" v-show="item.isShow">
          <span class="ge">歌曲</span>
          <ul>
            <li>
              <i class="fa fa-music"></i>
              <span>歌曲:{{ item.title }}</span>
            </li>
            <li><i class="fa fa-heart-o"></i><span>收藏</span></li>
            <li><i class="fa fa-download"></i><span>下载</span></li>
            <li><i class="fa fa-share-square-o"></i><span>分享</span></li>
          </ul>
          <div class="quxiao" @click="quxiao(item.id)">
            <i class="fa fa-window-close-o"></i>
            <p>取消</p>
          </div>
        </div>
      </li>
    </ul>
    <!-- <p>段咯</p>
    <p>段咯</p> -->
  </div>
</template>

<script>
import { Toast } from "vant";
//"https://p2.music.126.net/klOSGBRQhevtM6c9RXrM1A==/18808245906527670.jpg";
export default {
  data() {
    return {
      isShow: true,
      list: [
        {
          id: 1,
          title: "How to Use Excel",
          name: "橘子海OrangeOcean",
          isShow: false,
        },
        {
          id: 2,
          title: "ladylst",
          name: "橘子海OrangeOcean",
          isShow: false,
        },
        {
          id: 3,
          title: "Sona",
          name: "橘子海OrangeOcean",
          isShow: false,
        },
        {
          id: 4,
          title: "洛城",
          name: "橘子海OrangeOcean",
          isShow: false,
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    dist(id) {
      const index1 = this.list.findIndex((item) => item.id == id);
      this.list[index1].isShow = true;
    },
    quxiao(id) {
      const index1 = this.list.findIndex((item) => item.id == id);
      this.list[index1].isShow = false;
    },
  },
};
</script>

<style scoped>
.bSearch {
  /* position: relative; */
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(24, 22, 22, 0.85);
  color: white;
  /* border: 1px solid red; */
}
img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
}
p {
  height: 20px;
  line-height: 20px;
  /* color: white; */
  text-align: center;
}
.yi {
  display: block;
  font-size: 12px;
  text-align: center;
}
.play {
  padding: 30px 15px 10px 15px;
  box-sizing: border-box;
}
.fa-play-circle {
  background-color: red;
  color: rgb(24, 21, 21);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 26px;
  text-align: center;
}
strong {
  line-height: 30px;
  margin-left: 10px;
}
.fa-cloud-download {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 25px;
  font-size: 25px;
}
.two {
  list-style: none;
  margin-top: 35px;
  padding: 0 15px 0 48px;
}
.two li {
  margin-bottom: 15px;
}
.two li em {
  font-style: normal;
  font-size: 12px;
}
.two h4 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
.two li i {
  display: inline-block;
  font-style: normal;
  font-size: 23px;
  /* line-height: 23px; */
  float: right;
  margin-top: -20px;
}
.two #tan {
  position: absolute;
  z-index: 30;
  width: 100%;
  height: 313px;
  background-color: rgba(24, 22, 22, 1);
  top: 350px;
  left: 0;
  color: white;
  padding: 20px 0 20px 35px;
}
.two #tan .ge {
  display: block;
  margin-bottom: 12px;
}
.two #tan li i {
  font-size: 12px;
  margin-right: 10px;
  float: none;
}
.quxiao {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 35px;
}
#tan .quxiao i {
  display: block;
  text-align: center;
  float: none;
  border-radius: 50%;
}
#tan .quxiao p {
  margin: 5px 0;
}
</style>
